<template>
	<div class="conbox" id="record">
		<header class="header">
			<ul>
				<li class="lifirst">类型</li>
				<li class="lisecond">金额(元)</li>
				<li class="lisecond">冻结金额(元)</li>
			</ul>
		</header>
		<div class="cashlist">
			<ul>
				<li v-for="(item,index) in listcount" :key="index">
					<div class="lifirst">
						<p class="reson">{{item.log_type}}</p>
						<p class="recharge">{{item.seller_note}}</p>
						<p class="handle">{{item.status}}</p>
						<p>{{item.add_time}}</p>
					</div>
					<div class="lisecond reson">{{item.amount}}</div>
					<div class="lisecond reson">{{item.frozen_money}}</div>
				</li>
				<uniLoadMore :loadingType="loadingType" :status="loading"></uniLoadMore>
			</ul>
		</div>
	</div>
</template>

<script>
import { getapplyrecord } from '@/api/payment'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
export default {
	name: 'applyRecord',
	components: {
		uniLoadMore
	},
	data() {
		return {
			page: 1,
			timer: null,
			listcount: [],
			loading: '',
			loadingType: 0,
			owner_user_id: ''
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		uni.showLoading({
			title: '数据加载中'
		})
		this.getrecord()
	},
	onPullDownRefresh() {
		this.getrecord()
		uni.showLoading({
			title: '数据刷新中'
		})
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		that.timer = setTimeout(function() {
			that.getrecordmore()
		}, 1000)
	},
	mounted() {

	},
	methods: {
		getrecord() {
			this.page = 1
			uni.showNavigationBarLoading()
			this.loadingType = 0
			let data = {
				ru_id: this.owner_user_id,
				size: 6,
				page: this.page
			}
			getapplyrecord(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = lists
						uni.hideNavigationBarLoading()
						uni.stopPullDownRefresh()
						this.loading = ''
					} else {
						this.msg(res.message)
						this.loading = 'nodata'
					}
				} else {
					this.msg(res.message)
					this.loading = 'nodata'
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
		},
		getrecordmore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			let data = {
				ru_id: this.owner_user_id,
				size: 6,
				page: this.page
			}
			getapplyrecord(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = this.listcount.concat(lists)
						this.loadingType = 0
					}
					if (res.data.current_page == res.data.last_page) {
						this.loading = 'nomore'
					}
				} else {
					this.msg(res.message)
					this.loading = 'nodata'
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
			})
		}
	}
}
</script>
<style scoped lang="scss">
	.header {
		height: 90px;
		line-height: 90px;
		font-size: 24px;
		text-align: left;
		background: #F5F5F5;
	}
	.header ul{
		width: 100%;
		height: 100%;
		float: left;
	}
	.header ul li{
		float: left;
		color: #999999;
	}
	.header ul .lifirst{
		text-indent: 42px;
	}
	.lifirst{
		float: left;
		width: 40%;
		font-size: 24px;
	}
	.lisecond{
		float: left;
		width: 30%;
		text-align: center;
	}
	.cashlist{
		width: 100%;
		height: auto;
		background: white;
		top: 90px;
		display:inline-block;
	}
	.cashlist ul{
		width: 100%;
		height: auto;
		float: left;
	}
	.cashlist ul li{
		padding: 30px 20px;
		height: auto;
		width: 91%;
		/*  float: left;*/
		display: inline-block;
		margin-left: 3%;
		border-bottom: 1px solid #eeeeee;
	}
	.cashlist ul li:last-child{
		border: none;
	}
	.reson{
		font-size: 34px;
	}
	.recharge{
		line-height: 30px;
		margin-top: 20px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 1;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.lifirst p:nth-child(4){
		color:#999999;
		margin-top: 10px;
	}
	.lifirst .handle{
		margin-top: 10px;
		color: #FF6900;
	}
</style>

